<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="../css/welcome.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/chart.js"></script>
    <script src="../js/welcome.js"></script>
    <script>

        function startTime() {
            const today = new Date();
            var year = today.getFullYear(); // 获取当前年份
            var month = today.getMonth() + 1; // 获取当前月份，注意月份从0开始，需要加1
            var day = today.getDate(); // 获取当前日期
            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const dayOfWeek = weekDays[today.getDay()];
            document.getElementById("today").innerHTML = year+'年'+month+'月'+day+'日 '+dayOfWeek;
            let h = today.getHours();
            let m = today.getMinutes();
            let s = today.getSeconds();
            // add a zero in front of numbers<10
            m = checkTime(m);
            s = checkTime(s);
            document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
            setTimeout(startTime, 1000); // call every 1 second
        }

        function checkTime(i) {
            if (i < 10) {i = "0" + i};
            return i;
        }
    </script>
</head>
<body onload="startTime()">
<div id="main">
    <div class="layui-row">
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                今日用户量
                <div>
                    <div id="number1">0</div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">
                今日订单量
                <div>
                    <div id="number2">0</div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo grid-demo-bg1">
                交易量
                <div id="number-container">
                    <div id="number3">0</div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs3">
            <div class="grid-demo">
                <div id="today"></div>
                <div id="clock"></div>
            </div>
        </div>
    </div>
    <!-- 统计图 -->
    <div class="chartDiv">
        <canvas id="lineChart"></canvas>
    </div>
    <div class="chartDiv">
        <canvas id="barChart"></canvas>
    </div>
    <div class="chartDiv">
        <canvas id="doughnutChart"></canvas>
    </div>
    <div class="chartDiv">
        <canvas id="polarAreaChart"></canvas>
    </div>
</div>
</body>
</html>